<template>
  <div>
    <zbTable ref="tableRef" :api-fun="get_list" @action="action">
      <template #toolbar>
        <a-space>
          <!-- <a-button
            type="primary"
            class="ele-btn-icon"
            @click="showMoban = true"
          >
            <template #icon>
              <plus-outlined />
            </template>
            <span>新建</span>
          </a-button>
          <a-button type="dashed" class="ele-btn-icon" @click="daochu()">
            <template #icon>
              <upload-outlined />
            </template>
            <span>导出</span>
          </a-button> -->
          <a-button
            :type="item.types == 'add' ? 'primary' : 'dashed'"
            v-for="item in optBtn"
            :key="item.url"
            v-permission="item.url"
            @click="topAction(item)"
          >
            <template #icon>
              <plus-outlined v-if="item.types == 'add'" />
              <clear-outlined v-else-if="item.types == 'delete'" />
              <rest-outlined v-else-if="item.types == 'recycling'" />
            </template>
            <span>{{ item.name }}</span>
          </a-button>
        </a-space>
      </template>
    </zbTable>
    <!-- 新增/编辑弹窗 -->
    <moban
      v-if="showMoban"
      v-model:visible="showMoban"
      :templateId="templateId"
      @sel="sel"
    />
    <user-edit
      v-if="showEdit"
      v-model:visible="showEdit"
      :actionStatus="actionStatus"
      :editData="editData"
      :templateId="templateId"
      @done="done"
    />
    <check-data
      v-if="showCheck"
      v-model:visible="showCheck"
      :editData="editData"
      @done="done"
    />
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import {
    PlusOutlined,
    UploadOutlined,
    DownOutlined,
    ClearOutlined,
    RestOutlined,
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import userEdit from './components/user-edit.vue';
  import checkData from './components/check-data.vue';
  import moban from './components/moban.vue';
  import zbTable from '@/components/zbTable/jewelryCaoGouIndex.vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import {
    get_list,
    cancel_purchase,
    del_receipts,
    back_verify,
    cancel_verify,
    confirm_purchase,
    purchase_export
  } from '@/api/jewelry/receipts_purchase';

  // 是否显示编辑弹窗
  const showEdit = ref(false);
  const showMoban = ref(false);
  const showCheck = ref(false);
  // 编辑数据
  const editData = ref({});
  // 编辑按钮数据
  const actionData = ref({});
  // 获取子组件
  const tableRef = ref(null);
  const actionStatus = ref('add');
  const templateId = ref(null);
  const optBtn = ref([]);

  onMounted(() => {
    get_list({ page: 1, page_size: 10 })
      .then(async (res) => {
        optBtn.value = res.top_button;
      })
      .catch((e) => {
        message.error(e);
      });
  });

  const topAction = (item) => {
    console.log(item);
    if (item.types == 'add') {
      editData.value.id = '';
      editData.value.code = '';
      showMoban.value = true;
      actionStatus.value = 'add';
      actionData.value = { url: '/jewelry/receipts_purchase/add' };
    } else if (item.types == 'export') {
      let data = {
        url: 'jewelry/receipts_purchase/export',
        params: {},
        filename: '首饰采购单列表.xlsx'
      };
      daochuFn(data);
    }
  };

  const sel = (data) => {
    console.log('data', data);
    templateId.value = data.value;
    showMoban.value = false;
    showEdit.value = true;
  };
  /* 打开编辑弹窗 */
  /* const action = (data) => {
	  console.log(data)
    editData.value.id = data.row_data.id;
    editData.value.code = data.row_data.code;
    actionData.value = data.action_data;
    if (data.action_data.type == 'edit') {
      showEdit.value = true;
      actionStatus.value = 'edit';
    } else if (data.action_data.type == 'cancel') {
      Modal.confirm({
        title: '提示',
        content: '确定作废?',
        maskClosable: true,
        onOk: () => {
          zuofeiOk();
        }
      });
    } else if (data.action_data.type == 'delete') {
      Modal.confirm({
        title: '提示',
        content: '确定删除，删除后不可恢复?',
        maskClosable: true,
        onOk: () => {
          shanchu();
        }
      });
    } else if (data.action_data.type == 'verify') {
      showCheck.value = true;
    } else if (data.action_data.type == 'back_verify') {
      Modal.confirm({
        title: '提示',
        content: '确定反审?',
        maskClosable: true,
        onOk: () => {
          fanshen();
        }
      });
    } else if (data.action_data.type == 'cancel_verify') {
      Modal.confirm({
        title: '提示',
        content: '确定取消审核?',
        maskClosable: true,
        onOk: () => {
          cancelVerify();
        }
      });
    } else if (data.action_data.type == 'confirm') {
      Modal.confirm({
        title: '提示',
        content: '确定提交审核?',
        maskClosable: true,
        onOk: () => {
          confirmPurchase();
        }
      });
    }
  }; */
  const zuofeiOk = () => {
    cancel_purchase({ code: editData.value.code })
      .then((res) => {
        reloadTable();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const shanchu = () => {
    del_receipts({ code: editData.value.code })
      .then((res) => {
        reloadTable();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const fanshen = () => {
    back_verify({ code: editData.value.code })
      .then((res) => {
        reloadTable();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const cancelVerify = () => {
    cancel_verify({ code: editData.value.code })
      .then((res) => {
        reloadTable();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const confirmPurchase = () => {
    confirm_purchase({ code: editData.value.code })
      .then((res) => {
        reloadTable();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const done = (form) => {
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    showEdit.value = false;
    showCheck.value = false;
    showMoban.value = false;
    tableRef.value.reload();
  };
  const daochu = () => {
    let data = {
      url: 'jewelry/receipts_purchase/export',
      params: {},
      filename: '首饰采购单列表'
    };
    daochuFn(data);
  };

  const action = (data) => {
    console.log('data', data);
    /* if (data.action_data.type == 'edit') {
      showEdit.value = true;
      editId.value = data.row_data.id;
    }
    if (data.action_data.type == 'delete') {
      delArrData.value = [];
      delArrData.value.push(data.row_data.id);
      popconfirm.value = true;
    } */
    actionData.value = data.action_data;
    editData.value.id = data.row_data.id;
    editData.value.code = data.row_data.code;
    if (data.action_data.type == 'edit') {
      showEdit.value = true;
      actionStatus.value = 'edit';
    } else if (data.action_data.type == 'cancel') {
      Modal.confirm({
        title: '提示',
        content: '确定作废?',
        maskClosable: true,
        onOk: () => {
          zuofeiOk();
        }
      });
    } else if (data.action_data.type == 'delete') {
      Modal.confirm({
        title: '提示',
        content: '确定删除，删除后不可恢复?',
        maskClosable: true,
        onOk: () => {
          shanchu();
        }
      });
    } else if (data.action_data.type == 'verify') {
      showCheck.value = true;
    } else if (data.action_data.type == 'back_verify') {
      Modal.confirm({
        title: '提示',
        content: '确定反审?',
        maskClosable: true,
        onOk: () => {
          fanshen();
        }
      });
    } else if (data.action_data.type == 'cancel_verify') {
      Modal.confirm({
        title: '提示',
        content: '确定取消审核?',
        maskClosable: true,
        onOk: () => {
          cancelVerify();
        }
      });
    } else if (data.action_data.type == 'confirm') {
      Modal.confirm({
        title: '提示',
        content: '确定提交审核?',
        maskClosable: true,
        onOk: () => {
          confirmPurchase();
        }
      });
    }
  };
</script>
